$logoWidth: 800px;
$logoRatio: 1912px/686px;

section.banner {
  padding-top: 100px;
  padding-bottom: 120px;

  .banner-content {
    position: relative;
  }

  .vis-wrapper {
    position: absolute;
    top: 50%;
    right: -15%;
    width: 85%;
    height: 0;
    padding-bottom: 40%;
    z-index: -1;
    transform: translateY(-50%);
    opacity: 0.5;

    .vis {
      opacity: 0;
      position: absolute;

      &.viselem-01 {
        top: 0;
        right: 0;

        &.anima {
          animation: viaTranslateLoseX 1.5s;
          animation-fill-mode: both;
        }
      }

      &.viselem-02 {
        right: 120 / 912 * 100%;
        top: 28px;

        &.anima {
          animation: viaOpacity 3s ease 1.5s;
          animation-fill-mode: both;
        }
      }

      &.viselem-03 {
        right: 245 / 912 * 100%;
        top: 152px;

        &.anima {
          animation: viaOpacity 3s ease 1.5s;
          animation-fill-mode: both;
        }
      }

      &.viselem-04 {
        right: 245 / 912 * 100%;
        top: 101px;

        &.anima {
          animation: viaTranslateX 1.5s both, flashing 8s ease 9s infinite;
        }
      }

      &.viselem-05 {
        right: 400 / 912 * 100%;
        top: 80px;

        &.anima {
          animation: viaTranslateX 1.5s;
          animation-fill-mode: both;
        }
      }

      &.viselem-06 {
        right: 555 / 912 * 100%;
        top: 194px;

        &.anima {
          animation: viaTranslateLoseX 1.5s;
          animation-fill-mode: both;
        }
      }

      &.viselem-07 {
        right: 600 / 912 * 100%;
        top: 150px;

        &.anima {
          animation: viaTranslateX 1.5s;
          animation-delay: 0.5s;
          animation-fill-mode: both;
        }
      }

      &.viselem-08 {
        right: 700 / 912 * 100%;
        top: 220px;

        &.anima {
          animation: viaTranslateLoseX 1.5s ease 0.8s both, flashing 8s ease-in-out 2.3s infinite;
        }
      }

      &.viselem-09 {
        right: 722 / 912 * 100%;
        top: 289px;

        &.anima {
          animation: viaTranslateX 1.5s ease 0.8s both, flashing 8s ease-in-out 4s infinite;
        }
      }
    }
  }

  .intro-wrapper {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .banner-logo {
    max-width: $logoWidth;
    margin-bottom: 40px;

    &:after {
      content: '';
      display: block;
      width: 100%;
      height: 0;
      padding-bottom: 100% / $logoRatio;
      background-image: image_url('innoawards/2016/banner-logo.png');
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
  }

  .introduction {
    font-size: 18px;
    color: #9B9B9B;
    line-height: 1.5;

    .chunk {
      margin-bottom: 1rem;
    }

    p {
      margin: 0;
    }
  }

  .apply {
    padding: 10px 40px;
    display: inline-block;
    background-color: $color-brown;
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 2px;
    align-self: flex-start;
    font-weight: bold;
    margin-top: 15px;

    &.disable {
      background-color: #5f5f5f;
      cursor: no-drop;

      .icon-arrow {
        animation: none;
        display: none;
      }
    }
  }

  .icon-arrow {
    @include arrow-anim(9px);
  }
}

@media (max-width: 750px) {
  section.banner {
    &:before {
      position: absolute;
      top: 55px;
      right: 0;
      display: block;
      content: '';
      @include bg-element(250px);
      transform: rotateY(180deg);
      opacity: 0.5;
    }

    .vis-wrapper {
      display: none;
    }

    .intro-wrapper {
      flex-direction: column-reverse;
    }

    .apply {
      align-self: center;
      margin-bottom: 40px;
    }
  }
}
